<!--
 * @Author: 赵成刚-货源单详情
-->
<template>
  <view class="sourcegoodsdetail-box">
    <!-- 地图挂载 -->
    <map id="map1" ref="map1" style="display: none"></map>
    <view class="sourcegoodsdetail-item-big-box">
      <view class="card-box">
        <view v-for="(item, index) in formItem1List.slice(25, 28)" :key="index">
          <view
            class="u-flex sourcegoodsdetail-item-box"
            style="justify-content: initial; line-height: 60rpx"
          >
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              {{ item.key == 'sourceCode' ? item.name : item.value
              }}{{ item.key == 'sourceCode' ? '：' : '' }}
              <view v-if="item.key == 'shipperName'" class="corporationName">
                <view class="rate">
                  <view class="rate-num">
                    {{ formData.shipperEvaluate }}
                  </view>
                </view>
                <u-rate
                  :disabled="true"
                  active-color="#FADB14"
                  size="30"
                  gutter="8"
                  v-model="formData.shipperEvaluate"
                ></u-rate>
              </view>
            </view>
            <text v-if="item.key == 'sourceCode'">
              {{ item.value }}
            </text>
          </view>
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex" style="margin-bottom: 40rpx">
          <view class="u-flex">
            装货信息<view class="card-icon-box">
              <view></view>
              <view></view>
            </view>
          </view>
          <view class="qrcode" @click="popupshow = true">
            <view>二维码</view>
            <image src="../../../static/qrcode.png" />
          </view>
        </view>
        <view
          v-for="(item, index) in formItem3List.slice(0, 2)"
          :key="index + 'a'"
        >
          <view
            class="u-flex u-row-between sourcegoodsdetail-item-box longitude-box"
          >
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view
              style="line-height: 34rpx; text-align: right; margin-left: 80rpx"
              >{{ item.value }}</view
            >
          </view>
        </view>
        <view v-for="(item, index) in formItem1List.slice(0, 9)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view v-if="item.type != 'popupURL' && item.key != 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value }}
              </text>
              {{ item.company ? item.company : '' }}
            </view>
            <view v-if="item.key == 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value + '-' + formData.boatName }}
              </text>
            </view>
            <view
              v-if="item.type == 'popupURL'"
              @click="popupshow = true"
              class="u-flex popupshow-box"
            >
              <image
                class="img-box"
                src="https://minio.wskjwl.com/uipicture/ziyunfenxianganniu.png"
              />
              {{ item.value }}
            </view>
          </view>
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex">
          货物信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItem1List.slice(9, 17)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view v-if="item.type != 'popupURL' && item.key != 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value }}
              </text>
              {{ item.company ? item.company : '' }}
            </view>
            <view v-if="item.key == 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value + '-' + formData.boatName }}
              </text>
            </view>
            <view
              v-if="item.type == 'popupURL'"
              @click="popupshow = true"
              class="u-flex popupshow-box"
            >
              <image
                class="img-box"
                src="https://minio.wskjwl.com/uipicture/ziyunfenxianganniu.png"
              />
              {{ item.value }}
            </view>
          </view>
        </view>
        <view class="sourcegoodsdetail-item-img-box">
          <view
            v-for="(item, index) in formItem1List.slice(17, 21)"
            :key="index"
          >
            <view class="u-flex sourcegoodsdetail-item-box">
              <view class="u-flex-col u-col-center">
                <u-image
                  v-if="!item.key1 && item.value"
                  class="img-box"
                  :width="300"
                  :height="200"
                  :src="item.value"
                  alt=""
                  @click="previewImageF(item, index)"
                >
                  <u-loading slot="loading"></u-loading>
                </u-image>
                <image
                  v-else
                  @click="mapBtn(item)"
                  class="pound-box"
                  :src="`https://restapi.amap.com/v3/staticmap?location=${item.value2}&zoom=17&size=300*200&markers=small,0xFF0000,A:${item.value2}&key=c1790e0a396bdd65fe789112b003ed33`"
                />
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex">
          运费信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItem1List.slice(21, 25)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view v-if="item.type != 'popupURL' && item.key != 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value }}
              </text>
              {{ item.company ? item.company : '' }}
            </view>
            <view v-if="item.key == 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value + '-' + formData.boatName }}
              </text>
            </view>
            <view
              v-if="item.type == 'popupURL'"
              @click="popupshow = true"
              class="u-flex popupshow-box"
            >
              <image
                class="img-box"
                src="https://minio.wskjwl.com/uipicture/ziyunfenxianganniu.png"
              />
              {{ item.value }}
            </view>
          </view>
        </view>
      </view>
      <view class="card-box">
        <view class="u-flex">
          收货信息<view class="card-icon-box">
            <view></view>
            <view></view>
          </view>
        </view>
        <view v-for="(item, index) in formItem1List.slice(28, 33)" :key="index">
          <view class="u-flex u-row-between sourcegoodsdetail-item-box">
            <view style="white-space: nowrap">{{ item.name }}:</view>
            <view v-if="item.type != 'popupURL' && item.key != 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value }}
              </text>
              {{ item.company ? item.company : '' }}
            </view>
            <view v-if="item.key == 'itemName'">
              <text :style="item.company ? 'color:#ef513c' : ''">
                {{ item.value + '-' + formData.boatName }}
              </text>
            </view>
            <view
              v-if="item.type == 'popupURL'"
              @click="popupshow = true"
              class="u-flex popupshow-box"
            >
              <image
                class="img-box"
                src="https://minio.wskjwl.com/uipicture/ziyunfenxianganniu.png"
              />
              {{ item.value }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btns">
      <!-- <view class="btns" v-if="operate === 'true'"> -->
      <u-button type="primary" @click="goGrab" class="btn"> 立即抢单 </u-button>
    </view>
    <loginTip
      :loginTipShow="loginTipShow"
      @confirm="loginTipConfirm"
      @cancel="loginTipCancel"
    />
    <certificateTip
      :certificateTipShow="certificateTipShow"
      @confirm="certificateTipConfirm"
      @cancel="certificateTipCancel"
    />
    <u-popup
      v-model="popupshow"
      mode="center"
      width="500"
      height="650"
      class="popupURL0-box"
    >
      <view class="popupURL-popup-box" v-if="popupURL">
        <view>货源分享</view>
        <img
          show-menu-by-longpress
          :src="popupURL"
          alt=""
          class="popupURL-box"
        />
        <view
          style="
            font-size: 24rpx;
            line-height: 33rpx;
            padding: 0 30rpx 30rpx 30rpx;
          "
          >司机使用小程序内扫一扫功能获取货源信息，或保存至相册转发，使用小程序扫一扫功能自动识别货源信息</view
        >
      </view>
    </u-popup>
    <canvas
      class="canvas-code"
      canvas-id="myQrcode"
      style="left: -800px; position: absolute"
    />
  </view>
</template>
<script>
import httpEnum from './../../../common/httpEnum.js'
import loginTip from '../../../components/C_tipModal/loginTip.vue'
import certificateTip from '../../../components/C_tipModal/certificateTip.vue'
import QRCode from './../../../common/weapp-qrcode.js'
export default {
  name: 'sourcegoodsdetail',
  components: { loginTip, certificateTip },
  data() {
    return {
      showQrCode: false,
      loginTipShow: false,
      certificateTipShow: false,
      isShowRule: false,
      isShowWarn: false,
      adjustedPrice: undefined,
      deleteConfirm: false,
      formData: {},
      id: undefined,
      showBtn: 1,
      mapContext: null,
      formItem1List: [
        {
          name: '发货人',
          key: 'loadLinkMan',
          value: '',
        },
        {
          name: '发货人电话',
          key: 'loadLinkPhone',
          value: '',
        },
        {
          name: '所需车型',
          key: 'limitCarTypeValue',
          value: '',
        },
        {
          name: '所需车长',
          key: 'limitCarLengthValue',
          value: '',
        },
        {
          name: '排放标准',
          key: 'limitCarDischargeValue',
          value: '',
        },
        {
          name: '车牌颜色',
          key: 'limitPlateColorValue',
          value: '',
        },
        {
          name: '截止日期',
          key: 'validEndTime',
          value: '',
        },
        {
          name: '预计里程(km)',
          key: 'expectMile',
          value: '',
        },
        {
          name: '预计行驶',
          key: 'expectTravelTime',
          value: '',
        },
        {
          name: '货物类型',
          key: 'cargoType',
          value: '',
        },
        {
          name: '货物名称',
          key: 'cargoName',
          value: '',
        },
        {
          name: '货物重量(吨)',
          key: 'sourceTotalWeight',
          value: '',
        },
        {
          name: '货物单价(元/吨)',
          key: 'cargoUnitPrice',
          value: '',
        },
        {
          name: '货物总价(元)',
          key: 'cargoTotalPrice',
          value: '',
        },
        {
          name: '货物体积(方)',
          key: 'cargoVolume',
          value: '',
        },
        {
          name: '货物数量(件)',
          key: 'sourceTotalCount',
          value: '',
        },
        {
          name: '需要车辆数(辆)',
          key: 'needCarCount',
          value: '',
        },
        {
          name: '货物照片',
          key: 'itemPhoto',
          type: 'img',
          value: '',
        },
        {
          name: '货场照片',
          key: 'freightYardPhoto',
          type: 'img',
          value: '',
        },
        {
          name: '港口磅点照片',
          key: 'poundPlacePhoto',
          type: 'img',
          value: '',
        },
        {
          name: '港口磅点定位',
          key: 'poundLocation',
          type: 'img',
          key1: 'poundLocation',
          longitude: '',
          latitude: '',
          value: '',
          value1: '',
        },
        {
          name: '单车重量(吨)',
          key: 'sourceUnitWeight',
          value: '',
        },
        {
          name: '运费单价(元/吨)',
          key: 'freightUnitPrice',
          value: '2',
        },
        {
          name: '运费总价(元)',
          key: 'freightTotalPrice',
          value: '',
        },
        {
          name: '路损',
          key: 'roadLossValue',
          company: '‰',
          value: '',
        },
        {
          name: '公司名称',
          key: 'corpName',
          value: '',
        },
        {
          name: '发货人',
          key: 'shipperName',
          value: '',
        },
        {
          name: '货源单号',
          key: 'sourceCode',
          value: '',
        },
        // {
        //   name: '收货人类型',
        //   key: 'targetLinkType',
        //   value: '',
        // },
        {
          name: '收货人姓名',
          key: 'targetLinkMan',
          value: '',
        },
        {
          name: '收货人电话',
          key: 'targetLinkPhone',
          value: '',
        },
        {
          name: '备注信息',
          key: 'remark',
          value: '',
        },
      ],
      markers: [],
      //路线信息
      formItem3List: [
        {
          name: '发货地',
          key: 'loadPlace',
          longitude: '',
          latitude: '',
          value: '',
          value1: '',
        },
        {
          name: '目的地',
          key: 'targetPlace',
          longitude: '',
          latitude: '',
          value: '',
          value1: '',
        },
      ],
      popupshow: false,
      popupURL: '', //货源二维码
      linkToTransferShow: false,
      operate: null,
      isDisassemble: undefined,
      userInfo: uni.getStorageSync('userInfo'),
      formCardData: [],
    }
  },
  onLoad(options) {
    this.id = options.sourceId
    this.operate = options.operate
  },
  onShow() {
    this.getCardDataList()
    this.mapContext = uni.createMapContext('map1', this)
    this.getDataList()
    this.creadCode()
  },
  methods: {
    async getCardDataList() {
      const params = {
        id: this.id,
      }
      const { code, result, message } = await this.$u.get(
        '/freight-business/freightUserBank/page',
        params
      )
      if (code === '0') {
        this.formCardData = result.records
      } else {
        this.$api.msg(message)
      }
    },
    loginTipConfirm() {
      this.loginTipShow = false
    },
    loginTipCancel() {
      this.loginTipShow = false
    },
    certificateTipConfirm() {
      this.certificateTipShow = false
    },
    certificateTipCancel() {
      this.certificateTipShow = false
    },
    goGrab() {
      if (Object.keys(this.userInfo).length === 0) {
        return (this.loginTipShow = true)
      }
      if (this.userInfo.authStatus == null || this.userInfo.authStatus != 1) {
        return (this.certificateTipShow = true)
      }
      if (!this.formCardData.length) {
        return uni.showModal({
          title: '提示',
          content: '请先添加银行卡',
          showCancel: true,
          confirmText: '去添加',
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.navigateTo({
                url: '/pages/bank/index',
              })
            }
          },
        })
      } else {
        uni.setStorageSync('sourcegoodsDetail', this.formData)
        uni.navigateTo({
          url: `/pages/drivertabbar/sourcegoods/confirm?sourceId=${this.id}`,
        })
      }
    },
    //货源二维码
    creadCode() {
      new QRCode('myQrcode', {
        text: this.id,
        width: 120, //canvas 画布的宽
        height: 120, //canvas 画布的高
        padding: 8, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          //工具回调数据
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
          wx.hideLoading()
          this.addMutilImage(res.path)
        },
      })
    },
    //二维码增加字段
    addMutilImage(src) {
      let that = this
      let ctx = uni.createCanvasContext('myQrcode', this)
      // 画布填充背景色，默认白色
      ctx.setFillStyle('#fff')
      // 设置画布尺寸
      ctx.fillRect(0, 0, 300, 300)
      // 绘制图片
      ctx.drawImage(src, 0, 14, 300, 140)
      // 画笔颜色
      ctx.setFillStyle('#000000')
      // 字体大小
      ctx.setFontSize(14)
      ctx.setTextAlign('left')
      //绘制二维码上方文字
      ctx.fillText('货源单号：' + that.formData.sourceCode, 40, 14)
      // 把以上内容画到 canvas 中
      ctx.draw(true, (ret) => {
        uni.canvasToTempFilePath({
          // 保存canvas为图片
          canvasId: 'myQrcode',
          destWidth: 300,
          destHeight: 300,
          quality: 1,
          complete: function (res) {
            that.popupURL = res.tempFilePath
          },
        })
      })
    },
    //btnfrom
    btnfrom() {
      uni.previewImage({
        current: this.popupURL, // 当前显示图片的 http 链接
        urls: [this.popupURL], // 需要预览的图片 http 链接列表
      })
    },
    markerTap(val) {
      uni.navigateTo({
        url: `/pages/map/map?latitude=${val.latitude}&longitude=${val.longitude}&detail=true`,
      })
    },
    //图片预览大图
    previewImageF(val, index) {
      uni.previewImage({
        urls: [val.value],
      })
    },
    mapBtn(item) {
      this.mapContext.openMapApp({
        longitude: Number(item.longitude),
        latitude: Number(item.latitude),
        destination: item.value1,
      })
    },
    //根据登录用户查询货源单
    async getDataList() {
      const params = {
        sourceId: this.id,
      }
      let url = ''
      if (Object.keys(this.userInfo).length) {
        url = '/freight-business/freightSource/driver/app/sourceDetail'
      } else {
        url = '/freight-business/freightSource/visitor/app/sourceDetail'
      }
      const { code, result, message } = await this.$u.get(url, params)
      if (code === '0') {
        this.formData = result
        this.markers = []
        this.formItem1List.forEach((item) => {
          for (const key in result) {
            if (Object.prototype.hasOwnProperty.call(result, key)) {
              let attachPhotoList = JSON.parse(result.attachPhoto)
              if (item.key == 'targetLinkType') {
                item.value = '个人'
              }
              if (item.key == 'itemPhoto' && attachPhotoList.itemPhoto) {
                item.value =
                  httpEnum.baseImgUrl +
                  '/logistics-control-platform/' +
                  attachPhotoList.itemPhoto.toString()
              }
              if (
                item.key == 'freightYardPhoto' &&
                attachPhotoList.freightYardPhoto
              ) {
                item.value =
                  httpEnum.baseImgUrl +
                  '/logistics-control-platform/' +
                  attachPhotoList.freightYardPhoto.toString()
              }
              if (
                item.key == 'poundPlacePhoto' &&
                attachPhotoList.poundPlacePhoto
              ) {
                item.value =
                  httpEnum.baseImgUrl +
                  '/logistics-control-platform/' +
                  attachPhotoList.poundPlacePhoto.toString()
              }

              if (item.key1 == 'poundLocation') {
                let poundLocationList = result.poundLocation.split(',')
                item.longitude = poundLocationList[0]
                item.latitude = poundLocationList[1]
                item.value1 = result.poundPlace
                item.value2 = result.poundLocation
                item.value =
                  'https://minio.wskjwl.com/uipicture/poundLocationimg.png'
                this.markers = [
                  {
                    id: 0,
                    latitude: item.latitude, //纬度
                    longitude: item.longitude, //经度
                    width: 36, //宽
                    height: 50, //高
                  },
                ]
              }
              if (item.key === key && result[key]) {
                item.value = result[key]
              }
            }
          }
        })
        this.formItem3List.forEach((item) => {
          for (const key in result) {
            if (Object.prototype.hasOwnProperty.call(result, key)) {
              if (item.key === key && result[key]) {
                item.value = result[key]
                if (item.key == 'loadPlace') {
                  let loadPlaceList = result.loadLocation.split(',')
                  item.longitude = loadPlaceList[0]
                  item.latitude = loadPlaceList[1]
                  item.value1 = result.loadLocation
                } else if (item.key == 'targetPlace') {
                  let sourceTargetPlaceList = result.targetLocation.split(',')
                  item.longitude = sourceTargetPlaceList[0]
                  item.latitude = sourceTargetPlaceList[1]
                  item.value1 = result.targetLocation
                }
              }
            }
          }
        })
      } else if (code === '12008') {
        uni.navigateTo({
          url: '/pages/vehiclemanagement/vehiclemaintenance',
        })
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.sourcegoodsdetail-box {
  background-color: rgb(238, 238, 239);
  width: 100%;
  padding: 16rpx 24rpx;
  .sourcegoodsdetail-item-box {
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
  }
  .sourcegoodsdetail-item-img-box {
    .sourcegoodsdetail-item-box {
      border: none;
      white-space: nowrap;
    }
    display: flex;
    flex-wrap: wrap;
    view {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .img-box {
        width: 300rpx;
        height: 200rpx;
      }
    }
    .img1-box {
      position: relative;
      .img1-son-box {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: transparent;
        z-index: 1;
      }
    }
  }
  .longitude-box {
    border-bottom: 1px solid #f2f2f2;
    image {
      flex: none;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .card-box {
    background: white;
    margin-top: 24rpx;
    border-radius: 10rpx;
    padding: 24rpx 24rpx 0;
    .card-title-box {
      font-size: 28rpx;
      font-weight: 600;
    }
    .card-icon-box {
      margin-left: 6rpx;
      position: relative;
      view:nth-child(1) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #57a3ff;
        position: absolute;
        top: -12rpx;
        left: 10rpx;
        z-index: 1;
      }
      view:nth-child(2) {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #add3ff;
        position: absolute;
        top: -6rpx;
        left: 20rpx;
      }
    }
  }
  .sourcegoodsdetail-item-big-box {
    height: 90vh;
    overflow: hidden;
    overflow-y: scroll;
  }
  .btns {
    margin: 16rpx 0;
    .btn {
      width: 100%;
    }
  }
  .text-bule-color {
    color: #437df1;
  }
  .prevention-control-box {
    image {
      width: 80rpx;
      height: 80rpx;
    }
    .sourcegoodsdetail-item-box {
      text {
        width: 100%;
        display: inline-block;
        white-space: pre-wrap;
        word-wrap: break-word;
        height: auto;
      }
    }
  }

  .prevention-control-re-box {
    position: relative;
    image {
      position: absolute;
      right: 20rpx;
      top: 2rpx;
    }
  }
  .popupshow-box {
    background: #387cf9;
    height: 60rpx;
    width: 140rpx;
    border-radius: 8rpx;
    color: white;
    .img-box {
      width: 28rpx;
      height: 28rpx;
      padding: 0 10rpx;
    }
  }
  .popupURL0-box {
    /deep/.u-mode-center-box {
      background: transparent;
    }
    .popupURL-popup-box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #437df1;
      background-image: url('https://minio.wskjwl.com/uipicture/ziyuanfenxiangmodal.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding-top: 30rpx;
      .popupURL-box {
        width: 96%;
        height: 74%;
        margin: 40rpx 0 10rpx 0;
      }
      view:nth-child(1) {
        font-size: 34rpx;
        line-height: 48rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
.card-icon-box-modal {
  margin-left: 130rpx;
  position: relative;
  view:nth-child(1) {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #57a3ff;
    position: absolute;
    top: -28rpx;
    left: 10rpx;
    z-index: 1;
    margin-bottom: 16rpx;
  }
  view:nth-child(2) {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #add3ff;
    position: absolute;
    top: -22rpx;
    left: 20rpx;
    margin-bottom: 16rpx;
  }
}
.split-order {
  width: 90rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #6192f3;
  background: #ecf2fd;
  border-radius: 4rpx;
  margin-left: 8rpx;
}
.no-order-splitting {
  width: 90rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #fa6604;
  background: #feefe5;
  border-radius: 4rpx;
  margin-left: 8rpx;
}
.driverName-box {
  white-space: nowarp;
  padding: 32rpx;
  line-height: 60rpx;
  text-align: center;
}
.pound-box {
  width: 300rpx !important;
  height: 200rpx;
  line-height: 40rpx;
  white-space: normal;
}
.corporationName {
  display: flex;
  justify-content: center;
  margin-left: 30rpx;
  align-items: center;
}
.rate {
  width: 45rpx;
  height: 33rpx;
  background: #3399ff;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
}
.rate-num {
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 33rpx;
}
.qrcode {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 28rpx;
  color: #fff;
  line-height: 40rpx;
  background: #2979ff;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  image {
    width: 42rpx;
    height: 42rpx;
    margin-left: 8rpx;
  }
}
</style>
